<template>
  <div>
    <el-row :gutter="10">
        <el-col :span="24">

                <el-card>
                    公告
                    <el-collapse  v-model="active">
                        <el-collapse-item :name="index" v-for="(item ,index) in notices" :key="item.id">
                            <template slot="title">
                                <div>
                                    {{ item.title }}
                                </div>
<!--                                <span >-{{ item.time }}</span>-->
                            </template>
                            <div >{{ item.content }}</div>
                        </el-collapse-item>
                    </el-collapse>
                </el-card>

        </el-col>

        <el-col :span="24">

            <el-card>
                <div id="bar" :style="{width: '100%', height: '300px'}"></div>
            </el-card>

        </el-col>



    </el-row>

      <el-row :gutter="10" style="margin-top: 10px;">

          <el-col :span="12">
              <el-card>
                  <div id="pie" :style="{width: '100%', height: '400px'}"></div>
              </el-card>
          </el-col>

          <el-col :span="12">
              <el-card>
                  <div id="bar2" :style="{width: '100%', height: '400px'}"></div>
              </el-card>
          </el-col>
      </el-row>

  </div>
</template>

<script>


let barOption = {
    title: {
        text: '近七天订单成交数量统计',
        subtext: '',
        left: 'center'
    },
    legend: {
        top: 'top'
    },
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: []
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '',
            data: [],
            type: 'bar'
        }
    ]
};

let barOption2 = {
    title: {
        text: '用户订单状态统计',
        subtext: '',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    series: [
        {
            name: '用户订单状态统计',
            type: 'pie',
            radius: '50%',
            // data: this.result.statistics,
            data: [
                {value: 1048, name: '饮料'},
                {value: 735, name: '啤酒'},
                {value: 580, name: '矿泉水'},
                {value: 484, name: '羽绒服'},
                {value: 300, name: '衬衫'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
}



import API from '../../utils/request'

const url = "/api/user/"

export default {
  name: "Home",
  data() {
    return {
      notices: [],
      active: 0,
      user: {},
        orderTypeList:[],

        twoList:[]
    };
  },
  mounted() {
    this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {}
    this.load()
    this.drawLine()
  },
  methods: {
    load() {

        API.get("/api/userOrder/orderType").then((res) => {
            console.log(res)
            this.orderTypeList = res.data.one

            var barChart2 = this.$echarts.init(document.getElementById('bar2'));
            console.log(barOption2.series)
            barOption2.series[0].data = this.orderTypeList
            barChart2.setOption(barOption2)
            console.log(barOption2.series.data)


            var barChart = this.$echarts.init(document.getElementById('bar'));
            barOption.xAxis.data = res.data.two.x
            barOption.series[0].data = res.data.two.y
            barChart.setOption(barOption)

        })


      API.get("/api/bulletin/").then((res) => {
        this.notices = res.data;
      })
        var barChart = this.$echarts.init(document.getElementById('bar'));
        barChart.setOption(barOption)
        var barChart2 = this.$echarts.init(document.getElementById('bar2'));
        barChart2.setOption(barOption2)

        //请求到数据后在加载
/*        API.get("/api/user/echarts").then(res => {
            this.result = res.data
            this.panel = res.data.panel



        // }) */

    },
    drawLine() {
      const pieOption = {
        title: {text: '分类商品统计'},
        tooltip: {trigger: 'item'},
        legend: {top: '0', left: 'right'},
        series: [
          {
            name: '销量',
            type: 'pie',
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            data: [

            ]
          }
        ]
      };
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('pie'))

      API.get("/api/product").then(res => {
        let category = Array.from(new Set(res.data.map(v => v.categoryName)))
        category.forEach(item => {
          pieOption.series[0].data.push({name: item, value: res.data.filter(v => v.categoryName === item).map(v => v.sales).reduce((a,b) => a + b)})
        })
        console.log(pieOption)
        // 绘制图表
        myChart.setOption(pieOption);
      })
    }
  },
};
</script>

<style scoped>
</style>
